import React, { useState } from 'react';
import { Transfer, Tree, Input } from 'antd';
import BizIcon from '@/components/BizIcon'
import { formatMessage } from 'umi-plugin-locale';

const isChecked = (selectedKeys, eventKey) => selectedKeys.indexOf(eventKey) !== -1;


const TreeTransfer = ({ dataSource, targetKeys, ...restProps }) => {

    const transferDataSource = [];
    const dataSourceData = dataSource
    function flatten(list = []) {
        list.forEach(item => {
            let newItem = {
                ...item,
                key: item.sn || item.key
            }
            item.type === 1 && transferDataSource.push(newItem);
            flatten(item.children);
        });
    }
    flatten(dataSource);

    const generateTree = (treeNodes = [], checkedKeys = []) => {
        return treeNodes.map(({ children, ...props }) => {

            const title = <span style={{ color: props.type === 1 ? ((props.isOnline === 1) ? '#f50' : '#888') : '' }}>
                {
                    props.type === 1 && <BizIcon style={{ marginRight: '5px' }} type="icon-user" />
                }
                {props.title}
                {
                    props.type === 1 && (
                        props.isOnline === 1 ?
                            <span style={{ paddingLeft: 5, color: '#f50' }}>[{formatMessage({ 'id': 'common.online' })}]</span> :
                            <span style={{ paddingLeft: 5, color: '#bbb' }}>[{formatMessage({ 'id': 'common.offline' })}]</span>
                    )
                }
                {props.isDisabled === 1 ? <span style={{ paddingLeft: 5, color: '#bbb' }}>[{formatMessage({ 'id': 'common.disabled' })}]</span> : ''}
            </span>;

            return {
                ...props,
                title,
                key: props.sn || props.key,
                checkable: props.type === 1,
                disabled: checkedKeys.includes(props.key) || props.type === 0,
                children: generateTree(children, checkedKeys),
            }
        })
    }

    return (
        <Transfer
            {...restProps}
            targetKeys={targetKeys}
            dataSource={transferDataSource}
            className="tree-transfer"
            render={item => item.title}
            showSelectAll={true}

            onSearch={(dir, val) => {

                if (dir === 'left') {
                    const newUnitList = dataSourceData.filter(item => (
                        item.children.filter(e => (
                            e.title.indexOf(val) > -1
                        )).length > 0 || val.length == 0
                    )).map(item => {
                        item = Object.assign({}, item)
                        if (item.children) {
                            item.children = item.children.filter(res => (res.title.indexOf(val) > -1))
                        }
                        return item
                    })
                    dataSource = newUnitList
                }
            }}
        >
            {({ direction, onItemSelect, selectedKeys }) => {
                if (direction === 'left') {
                    const checkedKeys = [...selectedKeys, ...targetKeys];
                    return (
                        <>
                            <Tree
                                blockNode
                                checkable
                                checkStrictly
                                height={280}
                                showSearch={true}
                                checkedKeys={checkedKeys}
                                defaultExpandAll
                                // defaultExpandedKeys={[dataSource[0].key]}
                                treeData={generateTree(dataSource, targetKeys)}
                                onCheck={(_, { node: { key } }) => {
                                    onItemSelect(key, !isChecked(checkedKeys, key));
                                }}
                                onSelect={(_, { node: { key } }) => {
                                    onItemSelect(key, !isChecked(checkedKeys, key));
                                }}
                            />
                        </>
                    );
                }
            }}
        </Transfer>
    );
};

export default TreeTransfer